<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Monster Project;)</title>
				<style>

			
		</style>
		
		
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="css/menu.css">
		
		<script src="core/three.min.js"></script>
		<!--script src="js/controls/FlyControls.js"></script-->
		<script src="js/FlyControls.js"></script>
		<script src="js/shaders/CopyShader.js"></script>
		<script src="js/shaders/FilmShader.js"></script>
		<script src="js/postprocessing/EffectComposer.js"></script>
		<script src="js/postprocessing/ShaderPass.js"></script>
		<script src="js/postprocessing/MaskPass.js"></script>
		<script src="js/postprocessing/RenderPass.js"></script>
		<script src="js/postprocessing/FilmPass.js"></script>
	 
		<script src="js/libs/stats.min.js"></script>
		
		<script src="fonts/optimer_bold.typeface.js"></script>
		<!--script src="fonts/optimer_regular.typeface.js"></script>
		<script src="fonts/gentilis_bold.typeface.js"></script>
		<script src="fonts/gentilis_regular.typeface.js"></script>
		<script src="fonts/helvetiker_bold.typeface.js"></script>
		<script src="fonts/helvetiker_regular.typeface.js"></script>
		<script src="fonts/droid/droid_sans_regular.typeface.js"></script>
		<script src="fonts/droid/droid_sans_bold.typeface.js"></script>
		<script src="fonts/droid/droid_serif_regular.typeface.js"></script>
		<script src="fonts/droid/droid_serif_bold.typeface.js"></script-->
		<script src="js/libs/pnltri.min.js"></script>
					
	<script>
			THREE.Shape.Utils.triangulateShape = ( function () {
				var pnlTriangulator = new PNLTRI.Triangulator();
				return function ( contour, holes ) {
					// console.log("new Triangulation: PnlTri.js " + PNLTRI.REVISION );
					return pnlTriangulator.triangulate_polygon( [ contour ].concat(holes) );
				};
			} )();
			
			</script>
			
			
			<script src="js/globals.js"></script>	
			<script src="js/init.js"></script>
			<script src="js/render.js"></script> 
			
			
		<script src="js/class.js"></script>		
	    <script src="js/text3d.js"></script> 
		<script src="js/Objects.js"></script>		
		<script src="js/player.js"></script>				
		<script src="js/loaders/DDSLoader.js"></script> 
		<script src="js/materials.js"></script> 
		<script src="js/keyboard.js"></script>		
		<script src="js/render.js"></script> 
		
		<!--script src="js/events.js"></script--> 
		
		
			
	</head>
	
	 
	 
	<body onmouseup="PLAYER.CONTROL.OFF()" style="font-family:'font_2'" >
	
	<div style="display:block;z-index:1000000;position:absolute;left:40%;top:4%;width:20%;height:15%" class="hud" id="FORWARD" onmousedown=""  >  </div>
	<div style="display:block;z-index:1000000;position:absolute;left:1%;top:40%;width:15%;height:25%" class="hud" id="LEFT" onmousedown="PLAYER.CONTROL.LEFT()"  >  </div>
	<div style="display:block;z-index:1000000;position:absolute;right:1%;top:40%;width:15%;height:25%" class="hud" id="RIGHT" onmousedown="PLAYER.CONTROL.RIGHT()"  >  </div>
	<div style="display:block;z-index:1000000;position:absolute;left:40%;bottom:2%;width:20%;height:15%" class="hud" id="BACK" onmousedown="PLAYER.CONTROL.BACK()"  >  </div>
	
	<div style="display:block;z-index:1000000;position:absolute;left:4%;top:13%;width:20%;height:15%;text-align:center;" class="hud" id="STABLE_STATUS" onmousedown="STABLE_STATUS()"  > Stabilize </div>
 
  <div id="MSG"  class="hud_energy"  style="display:block;z-index:1000000;position:absolute;left:12%;top:12%;width:55%;height:auto"> </div>
 
 
 <!--div id="HUD"  class="hud_energy"  style="display:block;z-index:1000000;position:absolute;left:1%;top:0%;width:15%;height:40px;margin : 5px 5px 5px 5px;"> Energy : <span id="ENERGY" >1000</span> </div-->
 <!--div id="Help"  class="hud_energy"  style="display:block;z-index:1000000;position:absolute;left:15%;top:0%;width:15%;height:20px"><span id="HELP" >Help</span> </div-->
 
 <script>

  
 if (NOMOBILE == 0 ) {
 
 
  ELEMENT("FORWARD").addEventListener('touchstart', function(e){
 STABLE_STATUS();
 PLAYER.CONTROL.FORWARD();
 }, false);
  ELEMENT("LEFT").addEventListener('touchstart', function(e){
 STABLE_STATUS();
 PLAYER.CONTROL.LEFT();
 }, false);
  ELEMENT("RIGHT").addEventListener('touchstart', function(e){
 STABLE_STATUS();
 PLAYER.CONTROL.RIGHT();
 }, false);
  ELEMENT("BACK").addEventListener('touchstart', function(e){
 STABLE_STATUS();
 PLAYER.CONTROL.BACK();
 }, false);
 
  ELEMENT("FORWARD").addEventListener('touchend', function(e){
  disable_fly = false;
 }, false);
   ELEMENT("LEFT").addEventListener('touchend', function(e){
  disable_fly = false;
 }, false);
   ELEMENT("RIGHT").addEventListener('touchend', function(e){
  disable_fly = false;
 }, false);
   ELEMENT("BACK").addEventListener('touchend', function(e){
  disable_fly = false;
 }, false);
 
}

else 

{

  ELEMENT("FORWARD").style.display = "none";
  ELEMENT("LEFT").style.display = "none";
  ELEMENT("RIGHT").style.display = "none"; 
  ELEMENT("BACK").style.display = "none";
  
  
  ELEMENT("STABLE_STATUS").style.display = "none";
  
}



  </script>
 
		<script>
 
			init();
			animate();

			function init() {
			
			GET_MISSION_DATA("config/numbers_of_circle.json");
				
				
				container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 25, SCREEN_WIDTH / SCREEN_HEIGHT, 50, 1e7 );
				camera.position.z = radius * 15;

						
			    
				
						
				scene = new THREE.Scene();
				scene.fog = new THREE.FogExp2( 0x000000, 0.00000025 );

					scene.updateMatrixWorld();
					
				controls = new THREE.FlyControls( camera );

				controls.movementSpeed = 1000;
				controls.domElement = container;
				controls.rollSpeed = Math.PI / 24;
				controls.autoForward = false;
				controls.dragToLook = false;

				dirLight = new THREE.DirectionalLight( 0xfff0f0 , 1);
				dirLight.position.set( -1, 0, 1 ).normalize();
				scene.add( dirLight );

				//ambientLight = new THREE.AmbientLight( 0xffffff , 20);
				//scene.add( ambientLight );

				//cubeCamera = new THREE.CubeCamera( 1, 111111, 1024 );
				//cubeCamera.renderTarget.minFilter = THREE.LinearMipMapLinearFilter;
				//scene.add( cubeCamera );
				
				

													CENTER = new THREE.Mesh(new THREE.SphereGeometry( 100, 10, 10 ) , MATERIALS[23] );
													scene.add( CENTER );
													CENTER.position.set(0,0,0);
													


				
				
				generate_materials();
					
					
			
				
				ADD_PLAYER();
					
					
	
				
				
				setTimeout( function () {
    				

				
				
				console.log("APP.LOAD_CONFIG : " + APP.LOAD_CONFIG);
				
					for (var w=0;w<APP.SCENE.enemys.length;w++){
				
					console.log("radius :" + APP.SCENE.enemys[w].radius);
					console.log("name :" + APP.SCENE.enemys[w].name);
					console.log("geo1 :" + APP.SCENE.enemys[w].geo1);
					console.log("geo2 :" + APP.SCENE.enemys[w].geo2);
					console.log("spin_rotate :" + APP.SCENE.enemys[w].spin_rotate);
					
					var s = APP.SCENE.enemys[w];
					
						window["OBJECTS" + w] = new PLANET(0.1 , s.geo1 , s.geo2 , s.radius , s.name , s.rotx ,  s.roty ,  s.rotz ,s.rotxa ,  s.rotya ,  s.rotza , s.speed_ );
						
						window["OBJECTS" + w].meshClouds.position.y = Math.random()*13110;
						window["OBJECTS" + w].meshClouds.position.x = Math.random()*13110;
						window["OBJECTS" + w].meshClouds.position.z = Math.random()*13110;
						
						
						console.log( PLANETS[w].position.x +"<<<<<<<<<<<<<<<<<<<<<") ;
				    }
				
				
	
				} , 1000 ) 
	
	
	 
		pointerDetectRay = new THREE.Raycaster();
		pointerDetectRay.ray.direction.set(0, -1, 0);
		projector = new THREE.Projector();
		mouse2D = new THREE.Vector3(0, 0, 0);

		

		
		
				// moon
				var moonTexture = THREE.ImageUtils.loadTexture( "textures/lava/lavatile.jpg" );

				var materialMoon = new THREE.MeshPhongMaterial( { color: 0xffffff, map: moonTexture } );

				meshMoon = new THREE.Mesh( geometry, materialMoon );
				meshMoon.position.set( radius * 5, 0, 0 );
				meshMoon.scale.set( moonScale, moonScale, moonScale );
				//scene.add( meshMoon );

				// stars

				var i, r = radius, starsGeometry = [ new THREE.Geometry(), new THREE.Geometry() ];

				for ( i = 0; i < 35; i ++ ) {

					var vertex = new THREE.Vector3();
					vertex.x = Math.random() * 2 - 1;
					vertex.y = Math.random() * 2 - 1;
					vertex.z = Math.random() * 2 - 1;
					vertex.multiplyScalar( r );

					starsGeometry[ 0 ].vertices.push( vertex );

				}

				for ( i = 0; i < 400; i ++ ) {

					var vertex = new THREE.Vector3();
					vertex.x = Math.random() * 2 - 1;
					vertex.y = Math.random() * 2 - 1;
					vertex.z = Math.random() * 2 - 1;
					vertex.multiplyScalar( r );

					starsGeometry[ 1 ].vertices.push( vertex );

				}

				var stars;
				var starsMaterials = [
					new THREE.PointCloudMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
					new THREE.PointCloudMaterial( { color: 0x555555, size: 1, sizeAttenuation: false } ),
					new THREE.PointCloudMaterial( { color: 0x333333, size: 2, sizeAttenuation: false } ),
					new THREE.PointCloudMaterial( { color: 0x3a3a3a, size: 1, sizeAttenuation: false } ),
					new THREE.PointCloudMaterial( { color: 0x1a1a1a, size: 2, sizeAttenuation: false } ),
					new THREE.PointCloudMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } )
				];

				for ( i = 5; i < 15; i ++ ) {

					stars = new THREE.PointCloud( starsGeometry[ i % 2 ], starsMaterials[ i % 6 ] );

					stars.rotation.x = Math.random() * 6;
					stars.rotation.y = Math.random() * 6;
					stars.rotation.z = Math.random() * 6;

					s = i * 10;
					stars.scale.set( s, s, s );

					stars.matrixAutoUpdate = false;
					stars.updateMatrix();

					scene.add( stars );

				}

				renderer = new THREE.WebGLRenderer();
				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
				renderer.sortObjects = false;

				renderer.autoClear = false;

				container.appendChild( renderer.domElement );

				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				stats.domElement.style.zIndex = 100;
				//container.appendChild( stats.domElement );

				window.addEventListener( 'resize', onWindowResize, false );

				// postprocessing

				var renderModel = new THREE.RenderPass( scene, camera );
				//var effectFilm = new THREE.FilmPass( 0.35, 0.75, 2048, false );
				var effectFilm = new THREE.FilmPass( 0, 0, 2 , false );

				effectFilm.renderToScreen = true;
				composer = new THREE.EffectComposer( renderer );

				composer.addPass( renderModel );
				composer.addPass( effectFilm );

			};

			function onWindowResize( event ) {

				SCREEN_HEIGHT = window.innerHeight;
				SCREEN_WIDTH  = window.innerWidth;

				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
				camera.updateProjectionMatrix();

				composer.reset();

			};

			function animate() {

				requestAnimationFrame( animate );

				render();
				stats.update();

			};
 

		</script>
		
		
		
		<!-- MENU !!!!! -->
		
		
   <ul id="nav" style="position:absolute;top:0;z-index:10000000;" >
   
	<li><a href="#">game</a>
	<ul>
	<li><a href="#" id="fulscreen" onclick="launchIntoFullscreen(document.documentElement);" >Full screen</a></li>
	<li><a href="#">about</a>
		<ul>
			<li><a href="#">about Us</a>
				<ul>
					<li><a href="#">More About Us at colorfog.com .More data will provide later</a></li>
				</ul>
			</li>						
			<li><a href="#">about game</a>
			   <ul>
			       <li><a href="#">Prototype Circles game version beta 3D. Engine three.js , game structure original source code. </a></li>
			   </ul>
			</li>
		</ul>
	</li>
	<li><a href="#">Credits</a>
		<ul>
			<li><a href="#">credits to </a></li>
			<li><a href="#">external source</a>
				<ul>
					<li><a href="http://www.spiralgraphics.biz/">http://www.spiralgraphics.biz/</a></li>
				</ul>
			</li>
			
		</ul>
	</li>	
	<li><a href="#">Mission Statement</a>
	<ul>
		<li><a href="#">Mission objective Mission 1 - Collect energy from other stars . </a></li>
	</ul>
	</li>		
	
	</li>
</ul>
     
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>	
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script>
<script type="text/javascript" src="js/menu.js"></script>

		
	</body>
</html>
<script>
 ///////////////////
 //help 
 //ELEMENT("Help").addEventListener( "click" , helpBox , false);
 // not use at moment
 function helpBox () {
 console.log("OK")
 ELEMENT("MSG").innerHTML = "<dic style='float:left;'><center><h2>Help dialog</h2>  <h3>Control camera or player object , </h3> <span><img src='textures/help.png'></span> <br/> <div onclick='RESET_MSG()'>HIDE</div> </center> </div>";
 
 }
 
function RESET_MSG(){

ELEMENT("MSG").innerHTML = "";

}
 

 ////////////////////
 </script>
